<template>
  <div class="skeleton">
    <div v-for="v,i in 4" :key="i" class="item">
      <div class="cover"><img src="" alt=""></div>
      <div class="title"></div>
      <div class="type"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Skeleton'
}
</script>

<style lang="less" soped>

@keyframes move {
  to{
    background-position-x: -20%;
  }
}
.skeleton{
  .cover,.title,.type{
    margin-bottom: .4em;
    background-color: var(--main-darken-bg);
    background:linear-gradient(
      100deg,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,.5) 50%,
      rgba(148, 133, 133, 0) 60%,
    ) var(--main-darken-bg);
    background-size: 200% 100%;
    background-position-x: 120%;
    animation: move 1s linear infinite;
    border-radius: .2em;
  }
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 1em;

  .item{
    width: 20%;
    .cover{

      overflow: hidden;
      img{
        width: 100%;
        padding-bottom: 125%;
      }
    }
    .title{
      width: 100%;
      height: 1.5em;
    }
    .type{
      width: 60%;
      height: 1em;
    }
  }
}
</style>
